/**
 * 使用手册: http://blog.shilinwei.com:81/authMangeFile/temp.html
*/
import { ref } from 'vue';
import { columnDataTransform } from './columnDataTransform.js';
import {
  addDataReq, // 增
  deleteDataReq, // 删
  updateDataReq, // 改
  getDetailReq, // 查
  getListReq, // 列表
  exportDataReq, // 导出
  importDataReq, // 导入
} from '@/api/template/index';

const columnData = ref(
  columnDataTransform([
    {
      title: '序号',
      dataIndex: 'num',
      slotName: 'num',
      isSearch: false,
      isView: false,
      isAdd: false,
    },
    {
      title: '输入框类',
      type: 'title',
      isTable: false,
      isSearch: false,
      isView: false,
      addSpan: 24,
    },
    {
      title: '输入框',
      dataIndex: 'input',
      required: true,
    },
    {
      title: '输入框tag',
      type: 'inputTag',
      dataIndex: 'inputTag',
      required: true,
    },
    {
      title: '密码',
      dataIndex: 'password',
      type: 'password',
      required: true,
      isSearch: false,
    },
    {
      title: '数字输入框',
      dataIndex: 'numberInput',
      type: 'number',
      required: true,
    },
    {
      title: '文本框',
      dataIndex: 'textarea',
      type: 'textarea',
      isSearch: false,
      required: true,
    },
    {
      title: '时间类',
      type: 'title',
      isTable: false,
      isSearch: false,
      isView: false,
      addSpan: 24,
    },
    {
      title: '日',
      dataIndex: 'datePicker',
      type: 'datePicker',
      isSearch: false,
      required: false,
    },
    {
      title: '月',
      dataIndex: 'monthPicker',
      type: 'monthPicker',
      isSearch: false,
      required: false,
    },
    {
      title: '年',
      dataIndex: 'yearPicker',
      type: 'yearPicker',
      isSearch: false,
      required: false,
    },
    {
      title: '日范围',
      dataIndex: 'dateRangePicker',
      interfaceKey: ['startTime', 'endTime'],
      type: 'rangePicker',
      showTime: true,
      isSearch: false,
      isTable: false,
      required: false,
    },
    {
      title: '选择类',
      type: 'title',
      isTable: false,
      isSearch: false,
      isView: false,
      addSpan: 24,
    },
    {
      title: '树选择',
      dataIndex: 'treeSelect',
      type: 'treeSelect',
      required: false,
      isTable: false,
      options: {
        key: 'key',
        title: 'title',
        children: 'children',
      },
      selectOptions: [
        {
          key: 'node1',
          title: 'Trunk',
          disabled: true,
          children: [
            {
              key: 'node2',
              title: 'Leaf1',
            },
          ],
        },
        {
          key: 'node3',
          title: 'Trunk2',
          children: [
            {
              key: 'node4',
              title: 'Leaf2',
            },
            {
              key: 'node5',
              title: 'Leaf3',
            },
          ],
        },
      ],
    },
    {
      title: '字典下拉框',
      required: true,
      dataIndex: 'dictSelect',
      type: 'select',
      selectOptions: [
        {
          label: '数据一',
          value: '1',
        },
        {
          label: '数据二',
          value: '2',
        },
      ],
    },
    {
      title: '动态下拉框',
      required: true,
      dataIndex: 'trendsSelect',
      type: 'select',
      selectOptions: [],
      options: {
        label: 'key',
        value: 'val',
      },
    },
    {
      title: '复选框',
      required: true,
      dataIndex: 'checkbox',
      type: 'checkbox',
      selectOptions: [
        {
          label: '复选一',
          value: '1',
        },
        {
          label: '复选二',
          value: '2',
        },
      ],
    },
    {
      title: '单选框',
      required: true,
      dataIndex: 'radio',
      type: 'radio',
      selectOptions: [
        {
          label: '单选一',
          value: '1',
        },
        {
          label: '单选二',
          value: '2',
        },
      ],
    },
    {
      title: '文件类',
      type: 'title',
      isTable: false,
      isSearch: false,
      isView: false,
      addSpan: 24,
    },
    {
      title: '图片',
      dataIndex: 'file',
      type: 'file',
      limit: 1,
      slotName: 'file',
      isSearch: false,
    },
    {
      title: '自定义上传',
      dataIndex: 'customFile',
      type: 'file',
      limit: 1,
      isSlot: true,
      slotName: 'file',
      slotContent: '<div>点击我就可以上传哦～</div>',
      isSearch: false,
    },
    {
      title: '其他文件',
      dataIndex: 'otherFile',
      type: 'file',
      limit: 5,
      isTable:false,
      draggable: true,
      isSearch: false,
      addSpan: 24,
    },
    {
      title: 'map类',
      type: 'title',
      isTable: false,
      isSearch: false,
      isView: false,
      addSpan: 24,
    },
    {
      title: '位置',
      dataIndex: 'map',
      type: 'chooseAddress',
      isSearch: false,
    },
    {
      title: '操作',
      slotName: 'operate',
      fixed: 'right',
      isView: false,
      isSearch: false,
      isAdd: false,
      width: 280,
    },
  ])
);

/**
 * 给columns动态设置selectOptions的值
 * dataIndex: dataIndex 值
 * data: 动态的数据
 */
const setSelectOptionsByColumnData = (dataIndex = '', data = []) => {
  const indexArr = columnData.value.filter((v) => v.dataIndex === dataIndex) || [];
  indexArr.forEach(v => {
    v.selectOptions = data
  })
};

/**
 * 初始化动态下拉框的内容
 */
const initTrendsSelectData = () => {
  setTimeout(() => {
    // setTimeout 模拟接口请求
    setSelectOptionsByColumnData('trendsSelect', [
      {
        key: '数据一',
        val: '1',
      },
      {
        key: '数据二',
        val: '2',
      },
    ]);
  }, 1000);
};

/**
 * 把需要单独处理的数据请求写到这里，
 */
const initOtherData = () => {
  initTrendsSelectData();
};

export {
  addDataReq,
  deleteDataReq,
  updateDataReq,
  getDetailReq,
  getListReq,
  exportDataReq,
  importDataReq,
  columnData,
  initOtherData,
};
